<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">  
<title>音乐排行榜</title>
<style>
/* 整体列表内容 ul 需要对其设置宽度高度，圆角，阴影等样式*/
/* 设置五个列表项 li 的宽高，背景样式属性。其中第一个li 需要添加多重背景图像，最后一个li底部要圆角化，需要对它们单独进行控制*/
*{margin:0; padding:0; list-style:none; outline:none;}
/*整体控制歌曲排行版模块*/
.bg{
   width: 600px;/*宽*/
   height: 550px;/*高*/
   background-image:repeating-radial-gradient(circle at 50% 50%,#333,#000 1%);
   margin: 50px auto;/*外边距*/
   padding: 40px;/*内边距*/
   border-radius: 50%;/*边框添加圆角*/
   padding-top: 50px;
   border:10px solid #ccc;
}
/*歌曲排名部分*/
ul{
   width: 372px;
   height: 530px;
   background:#fff;
   border-radius: 30px;
   box-shadow: 15px 15px 12px #000;
   margin:0 auto;
}
ul li{
   width: 372px;
   height: 55px;
   background:#504d58 url(E:/张峰华/网页设计/3.25盒子模型/第五章-images/images/yinfu.ipg) no-repeat 70px 20px;
   margin-bottom: 2px;
   font-size: 18px;
   color: #d6d6d6;
   line-height: 55px;
   text-align: center;
   font-family: "微软雅黑";
}
/*需要单独控制的列表项*/
ul .tp{
   width: 372px;
   height: 247px;
   background:#fff;
   background-image:url(E:/张峰华/网页设计/3.25盒子模型/第五章-images/images/yinyue.jpg) ,url(E:/张峰华/网页设计/3.25盒子模型/第五章-images/images/wenzi.jpg);
   background-repeat:no-repeat;
   background-position:87px 16px,99px 192px;
   border-radius: 30px 30px 0 0;
}
ul .yj{
   border-radius: 0 0 30px 30px;
}
</style>
<body>
<div class="bg"> 
         <ul>     
            <li class="tp"></li> 
            <li>vnessa-constance</li>
            <li>dogffedrd-seeirtit</li>
            <li>dsieirif-constance</li>
            <li>wytuu-qeyounted</li>
            <li class="yj">qurested-conoted</li>
         </ul>
         
</div>
</body>
</html>